@import '@influxdata/clockface/dist/variables.scss';
.subscription-details-page {
  background-color: $cf-grey-5;
  .cf-flex-box.cf-flex-box__stretch-h {
    padding-top: $cf-space-m;
  }
  &__progress {
    float: left;
    width: 20%;
    margin-top: $cf-space-l;
    position: fixed;

    .subway-navigation-title {
      margin-bottom: $cf-space-3xl;

      .subway-navigation-title-text {
        h3 {
          font-size: $cf-space-m;
          line-height: $cf-space-m;
          overflow-wrap: break-word;
        }

        h6 {
          font-size: $cf-space-xs;
          line-height: 20px;
        }
      }
    }
  }
  &__status {
    margin-right: 20px;
    text-transform: uppercase;

    &--RUNNING {
      color: #34bb55;
      margin-left: 10px;
    }
    &--ERRORED {
      color: #e85b1c;
      margin-left: 10px;
    }
    &--VALIDATING {
      color: #ffb94a;
      margin-left: 10px;
    }
    &--STOPPED {
      color: #4d4d60;
      margin-left: 10px;
    }
    &--DISABLED {
      color: #4d4d60;
      margin-left: 10px;
    }
    &--button {
      margin-right: 24px;
    }
  }
}
